{% extends "layout.html" %}
{% block head %}
{{ super() }}
    <link href="{{ url_for('project_bp.recent_releases', project_name=project.name) }}" rel="alternate" title="Recent releases for {{project.name}}" type="application/atom+xml">
    <link href="{{ url_for('project_bp.recent_cves', project_name=project.name) }}" rel="alternate" title="Recent CVEs for {{project.name}}" type="application/atom+xml">
{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="row">
        {% if project.icon_url  %}
        <div class="col">
            <img src="{{ url_for('uploaded_pictures', filename=project.icon_url) }}" class="logo" />
        </div>
        {% endif %}
        <div class="col">
            <h3>{{ project.name }}</h3>
            <small><a href="{{ url_for('project_bp.settings', project_name=project.name) }}">Settings</a></small>
        </div>
        <div class="col-md-8 text-right">
            <a href="https://api.pinboard.in/v1/posts/add?url={{ project.website }}&description={{ project.name }}" target="_blank" title="Share on Pinboard">
                <i class="fa fa-thumb-tack" aria-hidden="true"></i>
            </a>
            <a href="http://www.newspipe.org/bookmark/bookmarklet?href={{ project.website }}&title={{ project.name }}" target="_blank" title="Share on Newspipe">
                <i class="fa fa-newspaper" aria-hidden="true"></i>
            </a>
            <a href="https://reddit.com/submit?url={{ project.website }}&title={{ project.name }}" target="_blank" title="Share on Reddit">
                <i class="fa fa-reddit" aria-hidden="true"></i>
            </a>
            <a href="https://twitter.com/intent/tweet?url={{ project.website }}&text={{ project.name }}" target="_blank" title="Share on Twitter">
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <br />
            <div class="card">
                <div class="card-body">
                    <h5>Description</h5>
                    <p class="text-justify">{{ project.description | safe }}</p>
                    <h5>Licenses</h5>
                    <p id="project-licenses" class="btn-toolbar"></p>
                    <h5>Languages</h5>
                    <p id="project-languages" class="btn-toolbar"></p>
                    <h5>Tags</h5>
                    <p id="project-tags" class="btn-toolbar"></p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <br />
            <div class="card">
                <div class="card-body">
                    <h5>Reference</h5>
                    {% if project.organization %}
                    <div class="row">
                        <div class="col">Organization</div>
                        <div class="col"><a href="{{ url_for('organization_bp.get', organization_name=project.organization.name) }}">{{ project.organization.name }}</a></div>
                    </div>
                    {% endif %}
                    <div class="row">
                        <div class="col">Homepage</div>
                        <div class="col text-truncate"><a href="{{ project.website }}">{{ project.website }}</a></div>
                    </div>
                    {% if project.manager_id %}
                    <div class="row">
                        <div class="col">Manager</div>
                        <div class="col"><a href="{{ url_for('user_bp.get', login=project.manager.login) }}">{{ project.manager.login }}</a></div>
                    </div>
                    {% endif %}
                    {% if project.submitter_id %}
                    <div class="row">
                        <div class="col">Submitter</div>
                        <div class="col"><a href="{{ url_for('user_bp.get', login=project.submitter.login) }}">{{ project.submitter.login }}</a></div>
                    </div>
                    {% endif %}
                    {% if project.services.count() != 0 %}
                        <div class="row">
                            <div class="col">
                                <hr />
                                <h5>Related service(s)</h5>
                            </div>
                        </div>
                    {% endif %}
                    {% for service in project.services %}
                        <div class="row">
                            <div class="col">
                                <p><a href="{{ url_for('service_bp.service', service_name=service.name) }}">{{ service.name }}</a></p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <br />
            <div class="card">
                <div class="card-body">
                    <h5>Related projects</h5>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="similar-tab" data-toggle="tab" href="#similar" role="tab" aria-controls="similar" aria-selected="true">Similar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="dependencies-tab" data-toggle="tab" href="#dependencies" role="tab" aria-controls="dependencies" aria-selected="false">Dependencies</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="dependents-tab" data-toggle="tab" href="#dependents" role="tab" aria-controls="dependents" aria-selected="false">Dependents</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="similar" role="tabpanel" aria-labelledby="similar-tab">
                            <div class="list-group list-group-flush">
                            {% for project_similar in similar  %}
                                <a class="list-group-item list-group-item-action" href="{{ url_for('project_bp.get', project_name=project_similar[0]) }}">{{ project_similar[0] }}</a>
                            {% endfor %}
                            </div>
                        </div>
			<div class="tab-pane fade" id="dependencies" role="tabpanel" aria-labelledby="dependencies-tab">
                            <div class="list-group list-group-flush">
                            {% for project in project.dependencies  %}
                                <a class="list-group-item list-group-item-action" href="{{ url_for('project_bp.get', project_name=project.name) }}">{{ project.name }}</a>
                            {% endfor %}
                            </div>
                        </div>
                        <div class="tab-pane fade" id="dependents" role="tabpanel" aria-labelledby="dependents-tab">
                            <div class="list-group list-group-flush">
                            {% for project in project.dependents  %}
                                <a class="list-group-item list-group-item-action" href="{{ url_for('project_bp.get', project_name=project.name) }}">{{ project.name }}</a>
                            {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <br />
            <div class="card">
                <div class="card-body">
                    <h5>News</h5>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="releases-tab" data-toggle="tab" href="#releases" role="tab" aria-controls="similar" aria-selected="true">Releases</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="cves-tab" data-toggle="tab" href="#cves" role="tab" aria-controls="dependencies" aria-selected="false">CVEs</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="releases" role="tabpanel" aria-labelledby="releases-tab">
                            <a href="{{ url_for('project_bp.recent_releases', project_name=project.name) }}"><i class="fa fa-rss-square" aria-hidden="true" title="Recent releases for {{ project.name }}"></i></a>
                            <div id="project-releases" class="list-group list-group-flush"></div>
                        </div>
			<div class="tab-pane fade" id="cves" role="tabpanel" aria-labelledby="cves-tab">
                            <a href="{{ url_for('project_bp.recent_cves', project_name=project.name) }}"><i class="fa fa-rss-square" aria-hidden="true" title="Recent releases for {{ project.name }}"></i></a>
                            <div id="list-cves" class="list-group list-group-flush"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div><!-- /.container -->
<script>
$(document).ready(function() {
    // Get information about the project in the URL parameter
    // var url = window.location.pathname;
    // var project = url.split("/").slice(-1)[0];
    var filters = [{"name": "name", "op": "eq", "val": "{{ project.name }}"}];
    $.ajax({
        url: "{{ url_for('projectapi0.projectapi',) }}",
        data: {"q": JSON.stringify({"filters": filters})},
        dataType: "json",
        contentType: "application/json",
        success: function(project) {

            project.objects[0].tags.map(function(tag){
                var a = document.createElement('a');
                var linkText = document.createTextNode(tag);
                a.appendChild(linkText);
                a.setAttribute('title', tag);
                a.setAttribute('class', 'btn btn-outline-dark btn-sm');
                a.setAttribute('style', 'margin:1px');
                a.setAttribute('href', '/projects/?tag='+tag);
                $("#project-tags").append(a);
                $("#project-tags").append('&nbsp;');
            })

            project.objects[0].licenses.map(function(license){
                var a = document.createElement('a');
                var linkText = document.createTextNode(license.name);
                a.appendChild(linkText);
                a.setAttribute('title', license.name);
                a.setAttribute('class', 'btn btn-outline-dark btn-sm');
                a.setAttribute('style', 'margin:1px');
                a.setAttribute('href', '/projects/?license='+license.license_id);
                $("#project-licenses").append(a);
                $("#project-licenses").append('&nbsp;');
            })

            project.objects[0].languages.map(function(language){
                var a = document.createElement('a');
                var linkText = document.createTextNode(language.name);
                a.appendChild(linkText);
                a.setAttribute('title', language.name);
                a.setAttribute('class', 'btn btn-outline-dark btn-sm');
                a.setAttribute('style', 'margin:1px');
                a.setAttribute('href', '/projects/?language='+language.name);
                $("#project-languages").append(a);
                $("#project-languages").append('&nbsp;');
            })
        }
    });


    var cveTemplate = _.template(
        '<a href="<%= cve_url %>" class="list-group-item list-group-item-action flex-column align-items-start">' +
          '<div class="d-flex w-100 justify-content-between">' +
            '<h5 class="mb-1"><%= cve_id %></h5>' +
            '<small>published <%= published_at %></small>' +
          '</div>' +
          '<p class="mb-1 text-justify"><%= cve_summary %></p>' +
        '</a>');
    var filters = [{"name": "project_id", "op": "eq", "val": "{{ project.id }}"}];
    $.ajax({
        url: "{{ url_for('CVEapi0.CVEapi',) }}",
        data: {"q": JSON.stringify({"filters": filters})},
        dataType: "json",
        contentType: "application/json",
        success: function(cves) {
            if (cves.num_results == 0) {
                $('#list-cves').append('No known vulnerabilities.')
            }
            cves.objects
            .sort(function (a, b) {
                return a.published_at < b.published_at ;
            })
            .map(function(cve){
                var cardHTML = cveTemplate({
                    'cve_url': 'http://cve.circl.lu/cve/' + cve.cve_id,
                    'cve_id': cve.cve_id,
                    'published_at': moment(cve.published_at).fromNow(),
                    'cve_summary': cve.summary
                });
             $('#list-cves').append(cardHTML);
            })
        }
    });


    var releaseTemplate = _.template(
	'<a href="<%= release_url %>" class="list-group-item list-group-item-action flex-column align-items-start" title="<%= changes %>">' +
          '<div class="d-flex w-100 justify-content-between">' +
            '<h5 class="mb-1"><%= version %></h5>' +
            '<small>published <%= published_at %></small>' +
          '</div>' +
          '<p class="mb-1 text-justify text-truncate"><%= changes %></p>' +
        '</a>');
    var filters = [{"name": "project_id", "op": "eq", "val": "{{ project.id }}"}];
    $.ajax({
        url: "{{ url_for('releaseapi0.releaseapi',) }}",
        data: {"q": JSON.stringify({"filters": filters})},
        dataType: "json",
        contentType: "application/json",
        success: function(releases) {
            if (releases.num_results == 0) {
                $('#project-releases').append('No known releases.')
            }
            releases.objects
            .sort(function (a, b) {
                return a.published_at < b.published_at ;
            })
            .map(function(release){
                var cardHTML = releaseTemplate({
                    'release_url': release.release_url,
                    'version': release.version,
                    'published_at': moment(release.published_at).fromNow(),
                    'changes': release.changes
                });
                $('#project-releases').append(cardHTML);
            })
        }
    });
});
</script>
{% endblock %}
